iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
23
Modern Web

30 天精通 RxJS系列 第 4

30 天精通 RxJS (03): Functional Programming 通用函式

  • 分享至 

  • xImage
  •  

本篇文章搬家囉! 這裡不再回覆留言,請移至 https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-03/


30 天精通 RxJS (03): Functional Programming 通用函式

了解 Functional Programming 的通用函式,能讓我們寫出更簡潔的程式碼,也能幫助我們學習 RxJS。

這是【30天精通 RxJS】的 03 篇,如果還沒看過 02 篇可以往這邊走:
30 天精通 RxJS (02): Functional Programming 基本觀念

讀者可能會很好奇,我們的主題是 RxJS 為什麼要特別講 Functional Programming 的通用函式呢? 實際上,RxJS 核心的 Observable 操作觀念跟 FP 的陣列操作是極為相近的,只學會以下幾個基本的方法跟觀念後,會讓我們之後上手 Observable 簡單很多!

今天的程式碼比較多,大家可以直接看影片!

Yes

ForEach

forEach 是 JavaScript 在 ES5 後,原生就有支援的方法。

原本我們可能要透過 for loop 取出陣列中的每一個元素

var arr = ['Jerry', 'Anna'];

for(var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

現在可以直接透過陣列的 forEach 取出每一個元素。

var arr = ['Jerry', 'Anna'];

arr.forEach(item => console.log(item));

forEach 是 FP 操作陣列的基本方法,我們可以用這個方法來實作下面三個我們今天要講的重點分別為 map, filter, concatAll。

Map

試著把 newCourseList 每個元素的 { id, title } 塞到新的陣列 idAndTitlePairs

var newCourseList = [
	{
		"id": 511021,
		"title": "React for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 5
	},
	{
		"id": 511022,
		"title": "Vue2 for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 5
	},
	{
		"id": 511023,
		"title": "Angular2 for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 5
	},
	{
		"id": 511024,
		"title": "Webpack for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 4
	}
], idAndTitle = [];

newCourseList.forEach((course) => {
	idAndTitle.push({ id: course.id, title: course.title });
});

雖然我們成功的把 newCourseList 轉成 idAndTitlePairs,但這樣的寫法還是顯得有點太複雜了,我們可以用更抽象化的方式來完成。

上面我們練習到 newCourseList 轉換成一個新的陣列 idAndTitlePairs,這個轉換的過程其實就是兩件事

  • 遍歷 newCourseList 所有的元素
  • 把每個元素的預期值給到新的陣列

把這個過程抽象化成一個方法 map,以下是簡化的基本思路:

  1. 我們會讓每個 陣列 都有一個 map 方法
  2. 這個方法會讓使用者自訂傳入一個 callback function
  3. 這個 callback function 會回傳使用者預期的元素

雖然 ES5 之後原生的 JavaScript 陣列有 map 方法了,但希望讀者自我實做一次,能幫助理解。

// 我們希望每一個陣列都有 map 這個方法,所以我們在 Array.prototype 擴充 map function
Array.prototype.map = function(callback) {
  var result = []; // map 最後一定會返回一個新陣列,所以我們先宣告一個新陣列
  
  this.forEach(function(element, index) {
	  // this 就是呼叫 map 的陣列
	  result.push(callback(element, index));
	  // 執行使用者定義的 callback, callback 會回傳使用者預期的元素,所以我們把它 push 進新陣列
  })
  
  return result;
}

這裡用到了 JavaScript 的 prototype chain 以及 this 等觀念,可以看此影片了解!

到這裡我們就實作完成 map 的方法了,讓我們來試試這個方法吧!

var idAndTitle = newCourseList
                 .map((course) => {
                     return { id: course.id, title: course.title };
                 });

可以看到我們的程式碼更加的簡潔!

Filter

如果我們希望過濾一個陣列,留下陣列中我們想要的元素,並產生一個新的陣列,要怎麼做呢?
先讓我們用 forEach 完成!

讓我們過濾出 rating 值是 5 的元素

var ratingIsFive = [];

newCourseList.forEach((course) => {
	if(course.rating === 5) {
		ratingIsFive.push(course);
	}
});

同樣的我們試著來簡化這個過程,首先在這個轉換的過程中,我們做了兩件事:

  1. 遍歷 newCourseList 中的所有元素
  2. 判斷元素是否符合條件,符合則加到新的陣列中
Array.prototype.filter = function(callback) {
	var result = [];
	this.forEach((item, index) => {
		if(callback(item, index))
			result.push(item);
	});
	return result;
}

試試這個方法

var ratingIsFive = newCourseList
                   .filter((course) => course.rating === 5);

會發現我們的程式碼又變簡單了,接著我們試著把 filter, map 串起來。

如果我想要取出所有 rating 是 5 的所有 course title

var ratingIsFive = newCourseList
                   .filter((course) => course.rating === 5)
                   .map(course => course.title);

ConcatAll

有時候我們會遇到組出一個二維陣列,但我們希望陣列是一維的,問題如下:

假如我們要取出 courseLists 中所有 rating 為 5 的課程,這時可能就會用到兩個 forEach

var user = {
  id: 888,
  name: 'JerryHong',
  courseLists: [{
    "name": "My Courses",
    "courses": [{
      "id": 511019,
      "title": "React for Beginners",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ id: 1, name: "JavaScript" }],
      "rating": 5
    }, {
      "id": 511020,
      "title": "Front-End automat workflow",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ "id": 2, "name": "gulp" }, { "id": 3, "name": "webpack" }],
      "rating": 4
    }]
  }, {
    "name": "New Release",
    "courses": [{
      "id": 511022,
      "title": "Vue2 for Beginners",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ id: 1, name: "JavaScript" }],
      "rating": 5
    }, {
      "id": 511023,
      "title": "Angular2 for Beginners",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ id: 1, name: "JavaScript" }],
      "rating": 4
    }]
  }]
};

var allCourseIds = [];

user.courseLists.forEach(list => {
  list.courses
    .filter(item => item.rating === 5)
    .forEach(item => {
      allCourseIds.push(item)
    })
})

可以看到上面的程式碼,我們用了較為低階的操作來解決這個問題,我們剛剛已經試著用抽象化的方式實作了 map 跟 filter,那我們同樣也能夠定義一個方法用來 攤平二維陣列。

讓我們來加入一個 concatAll 方法來簡化這段程式碼吧!
concatAll 要做的事情很簡單,就是把一個二維陣列轉成一維。

Array.prototype.concatAll = function() {
  var result = [];
  
  // 用 apply 完成
  this.forEach((array) => {
    result.push.apply(result, array);
  });

  // 用兩個 forEach 完成
  // this.forEach((array) => {
  //   array.forEach(item => {
  //     result.push(item)
  //   })
  // });
  
  // 用 ES6 spread 完成
  // this.forEach((array) => {
  //   result.push(...array);
  // })
  
  return result;
};

同樣的我們用前面定要好的 courseLists 來試試 concatAll 吧!

var allCourseIds = user.courseLists.map(list => {
	return list.courses.filter(course => course.rating === 5)
}).concatAll()

這邊出一個比較難的題目,大家可以想想看要怎麼解

var courseLists = [{
  "name": "My Courses",
  "courses": [{
    "id": 511019,
    "title": "React for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/tech"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/tech"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/tech"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }, {
    "id": 511020,
    "title": "Front-End automat workflow",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/arch"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/arch"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/arch"
    }],
    "tags": [{
      "id": 2,
      "name": "gulp"
    }, {
      "id": 3,
      "name": "webpack"
    }],
    "rating": 5
  }]
}, {
  "name": "New Release",
  "courses": [{
    "id": 511022,
    "title": "Vue2 for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/nature"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/nature"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/nature"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }, {
    "id": 511023,
    "title": "Angular2 for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/people"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/people"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/people"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }]
}];

/* 
var result = courseList
不得直接使用索引 covers[0],請用 concatAll, map, filter, forEach 完成
result 結果為 [
    {
      id: 511019,
      title: "React for Beginners",
      cover: "http://placeimg.com/150/200/tech"
    }, {
      id: 511020,
      title: "Front-End automat workflow",
      cover: "http://placeimg.com/150/200/arch"
    }, {
      id: 511022,
      title: "Vue2 for Beginners",
      cover: "http://placeimg.com/150/200/nature"
    }, {
      id: 511023,
      title: "Angular2 for Beginners",
      cover: "http://placeimg.com/150/200/people"
    },
 ]
*/

練習連結: JSBin | JSFiddle

這題有點難,大家可以想想看,我把答案寫在這裡了!

如果大家還想做更多的練習可以到這個連結:http://reactivex.io/learnrx/

這個連結是 Jafar 大神為他的 RxJS workshop 所做的練習網站!

今日小結

今天講了 FP 操作陣列的三個通用函式 forEach, map, filter,以及我們自己定義的一個方法叫 concatAll。這幾天我們把學習 RxJS 的前置觀念跟知識基本上都講完了,明天我們就開始進入 RxJS 的重點核心 Observable 囉!


上一篇
30 天精通 RxJS (02): Functional Programming 基本觀念
下一篇
30 天精通 RxJS (04): 什麼是 Observable ?
系列文
30 天精通 RxJS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
feng619
iT邦新手 5 級 ‧ 2016-12-20 15:14:08

影片最後的 getMousePosition 蠻有趣的
期待介紹 Observable 時可以聽到更多XD

JerryHong iT邦新手 5 級 ‧ 2016-12-20 15:16:46 檢舉

恩恩 我們之後講到 Observable Operators 的時候,會帶很多範例,其中有一個就是拖拉喔:)

eguitarz iT邦新手 5 級 ‧ 2017-01-06 14:17:14 檢舉

(deleted)

4
eguitarz
iT邦新手 5 級 ‧ 2017-01-07 09:22:26

其實可以用 reduce 取代 concatAll

let input = [[1], [2, 3], [4]];
let result = input.reduce((arr, current) => arr.concat(current));
console.log('result', result)
"result"
[1, 2, 3, 4]
JerryHong iT邦新手 5 級 ‧ 2017-01-07 17:01:19 檢舉

會特別實作 concatAll 是有原因的,在後面的文章就會看到:)

1
shinypichu88
iT邦新手 5 級 ‧ 2017-01-15 23:31:01

Array.prototype.filter有bug

    result.push(item);
3
pjchender
iT邦新手 3 級 ‧ 2017-04-08 00:35:40

好精彩的文章阿!做完就感覺的到 expression 和 statment 的差異了!

lioff iT邦新手 5 級 ‧ 2018-03-07 11:09:59 檢舉
var res = courseLists.map(item => {
    return item.courses.filter( (course) => course.id == 511019 || course.id == 511020 ||  course.id == 511022  );
}).concatAll().map( item => { 
   var url;
   item.covers.forEach((t,i) => {
        if(i ===0 ) { return url = t.url }
    });
    return  {id :item.id , title :item.title, cover: url };
});
console.log(res);

请大神指点一二是否还有更好的方法

1
newhandfun
iT邦新手 5 級 ‧ 2018-08-08 11:03:51

我的程式碼~

function imageSizeFilter(w,h,img){
  return img.width==w&&img.height;
}

var newArr = courseLists.map(
  (list)=> {
  //這題看起來直接抓courses的值就可以了,不用filter?
    var result = list.courses.map
    (
      (course)=>
      {
      //感受到filter的強大。不過美中不足的是就算只有取到一個值還是陣列,必須得[0]
        var item = {id:course.id,title:course.title,cover:course.covers.filter(cover=>imageSizeFilter(150,200,cover))[0].url};
        return item;
      }
    );
    return result;
  }).concatAll();
console.log(newArr);
JerryHong iT邦新手 5 級 ‧ 2019-04-16 00:59:57 檢舉

不能用 [0]

0
icerkure
iT邦新手 5 級 ‧ 2018-10-01 14:28:04
	var courses = [];
	courseLists.forEach((item)=> courses.push(item.courses));
	courses = courses.concatAll();
	courses = courses.map(item =>{
	  return {
	    id : item.id,
	    title: item.title,
	    cover: item.covers.filter((sub)=> {
	      if(sub.url.indexOf('150')!=-1){ 
	        return sub.url
	      }    
	    }).map(sub=>sub.url).join('')
	  };  
	})
	console.log( courses );
JerryHong iT邦新手 5 級 ‧ 2019-04-16 00:58:56 檢舉

第一個 forEach 可以改用 map

0
zououour
iT邦新手 5 級 ‧ 2018-10-08 12:22:09
let r = courseLists.map(courseItems => {
        let result = [];
        courseItems.courses.forEach(course => {
                result.push(
                    {
                        id: course.id,
                        title: course.title,
                        cover: course.covers.filter(
                            (cover, index) => {
                                return index === 0;
                            }
                        )[0].url
                    })
            });
        return result;
        }
    ).concatAll();

console.log(r);
不知是否符合要求?
JerryHong iT邦新手 5 級 ‧ 2019-04-16 00:58:11 檢舉

不能用 [0]

0
JerryHong
iT邦新手 5 級 ‧ 2019-05-09 15:06:22

本篇文章搬家囉! 這裡不再回覆留言,請移至 https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-03/

我要留言

立即登入留言